<template>
  <div class="design-item">  	
    <div class="design-item-controller cap-image-ad">
    	
	   
	    <div v-if="currentTemplateId == 1 && cardList.length" class="design-item-controller-handle image-ad-one">
	        <div class="cap-image-ad">
	            <ul>
	                <li v-for="(item , index ) in cardList" class="top2end-img-container" :style="{marginTop: imageBorderWidth+ 'px' , marginBottom:imageBorderWidth+ 'px' }">
	                    <h3 v-if="item.title" class="cap-image-ad-title">{{item.title}}</h3>
	                    <img :src="item.filesNameUrl"/>
	                </li>
	            </ul>
	        </div>
	    </div>    	
    	
      <div class="design-item-controller-handle" v-if="!cardList.length">
        <div class="design-default-preview">
          <div class="design-default-preview-title">点击编辑图片广告</div>
          <div class="design-default-preview-tip">建议宽度750像素</div>
        </div>
      </div>
      <slot name="menu"></slot>
    </div>
    
    
    <div class="design-item-editor" v-show="show && !showAddMenuGroup">
      <div class="design-item-editor-title">图片广告</div>
      
      <!--选择模板-->
      <div class="editor-group">
        <div class="editor-group-label editor-group-label-top">选择模板：</div>
        <div class="editor-group-control">
          <div v-for="(item , index ) in templateArray" :key="index">
            <div
              class="design-select-templates"
              :class="{'active' : currentTemplateId == index}"
              @click="bindSelectTemplate(index)"
            >
              <div class="design-select-templates-image">
                <span :class="['template-image' , 'template-image-'+index]"></span>            
              </div>
              <div class="design-select-templates-title">{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>

      
      <!--图片间隙调整-->
      <div class="editor-group" v-show="currentTemplateId > 0 && currentTemplateId != 4 ">
        <div class="editor-group-label">图片间隙：</div>
        <div class="editor-group-control">
          <el-slider v-model="imageBorderWidth" show-input></el-slider>
        </div>
      </div>

      <!--图片上传--> 
      <div class="editor-group">
      	
        <div class="editor-card">        
          <div class="editor-card-add" v-show="currentImageCountLimit > 0 ">
            <div class="editor-card-add-text">
              <el-upload
                action="/oss/api/v1/upload/common"
                :on-success="handleUploadSuccess"
                :show-file-list="false"
                style="margin-bottom: 10px;"
              >
                <i class="el-icon-plus" style="font-weight: 700;"></i>添加一个背景图
              </el-upload>
            </div>
            <div class="editor-card-add-image-tip">{{currentTemplateInfo.tips}}</div>
          </div>                 
        </div>

      </div>
            
    </div>
    
    
    <slot name="addMenuGroup" v-if="showAddMenuGroup"></slot>
    
    
  </div>
</template>
<script>

const cardItemObjExample = {
  title: "",
  filesNameUrl: "",
  filesName: "",
  linkType: "",
  linkValue: "",
  linkValueName: "",
  linkTypeName: "",
  imageHeight: 0,
  imageWidth: 0
};
var defaultOptions = {};
export default {
  name: "nc-design-item-image-ad",
  otherInfo: {
    title: "图片广告",
    type: "image",
    group: 0,
    max: 0
  },
  //外部传入参数
  props: {
    show: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: {}
    },
    cid: {
      type: Number
    },
    showAddMenuGroup: {
      type: Boolean,
      default: false
    }
  },
  data() {
  	return {
  		currentTemplateId:1,
  		imageFillStyle:0,
  		imageBorderWidth:0,
  		cardList:[],
  		// 暂时只有 1行1个 有用
  		templateArray:[
	      { name: "一行1个", tips: "建议宽度 750 像素", picMax: 10 }
      ],
      validated:true
  	}
  },
  computed: {
    currentTemplateInfo() {
      return this.templateArray[0];
    },
    currentImageCountLimit() {
      let max = this.currentTemplateInfo.picMax - this.cardList.length;
      return max < 0 ? 0 : max;
    }
  },
  watch: {
    currentTemplateId(value) {

    },
    imageBorderWidth(value) {

    }
  },
  mounted() {

  },
  methods: {  	
  	// 图片上传成功接口
  	handleUploadSuccess(res) {
      let img = res.data;
      let itemObj = $.extend(true, {}, cardItemObjExample); // 继承所有属性
      itemObj.filesNameUrl = img.url;
      itemObj.filesName = img.name;
      itemObj.imageWidth = img.width;
      itemObj.imageHeight = img.height;
      this.cardList.push(itemObj);
      this.validated = true;
   },
    /**
     * 验证数据
     */
    verifyData() {
      return (this.validated = !!this.cardList.length);
    },
    // 获取组件内数据
    getCurrentData() {
      this.verifyData();
      return this.validated
        ? {
            currentTemplateId: this.currentTemplateId,
            imageFillStyle: this.imageFillStyle,
            imageBorderWidth: this.imageBorderWidth,
            cardList: this.cardList,
            type: "image"
          }
        : null;
    },
    // 选择当前模板id 暂时只有1个
    bindSelectTemplate(templateId) {
      this.currentTemplateId = templateId;
    }
  }
};
</script>